<template>
	<div class="wrapper">
		<el-carousel :trigger="triggerMethods" :arrow="arrowMethods">
			<el-carousel-item v-for="(item,index) in imgList" :key="index">
				<el-image fit="fill" class="swiper-img" v-bind:src="item" />
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<style scoped>
	.swiper-img {
		width: 320px;
		height: 260px;
		/* height: 100%; */
		/* width: 100%; */
	}
</style>

<script>
	export default {
		name: 'imgswiper',
		props: {
			list: Array,
			triggerMethods: String,
			arrowMethods: String,
			imgKey: {
				default: ''
			},
		},
		computed: {
			showSwiper() {
				return this.list.length
			},
			imgList() {
				if (this.imgKey) {
					try {
						return this.list.map(i => i[this.imgKey]);
					} catch (error) {
						return [];
					}
				} else {
					return this.list;
				}
				return this.list;
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		overflow: hidden;
		width: 320px;
		/*height: 700px;*/
		/* line-height: 200px; */
		height: 260px;
		background: #f0f0f0;
	}

	/* .swiper-img{
    width: 100% ;
    height: auto;
  } */
	.wrapper /deep/ .el-carousel__container {
		height: 260px;
	}

	.wrapper /deep/ .el-carousel__indicators {
		height: 15%;
	}

	.wrapper>>>.el-carousel__arrow {
		width: 23px;
		height: 23px;
		background: #000;
		opacity: 0.2;
		border-radius: 50%;
		top: calc(50%);
		top: -moz-calc(50%);
		top: -webkit-calc(50%);
	}

	.wrapper>>>.el-carousel__arrow i {
		font-size: 16px;
	}

	.wrapper>>>.el-carousel__indicators {
		bottom: 10px;
	}
</style>